<template>
  <!-- 不需要根标签了 -->
  <h1>hello vue3</h1>
  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }} -{{ value }}</li>
  </ul>
  <button @click="add">按钮</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

interface State {
  person: {
    name: string;
    age: number;
    sex?: string;
  };
}

export default defineComponent({
  name: "App",
  data(): State {
    // vue3中data只能写函数形式
    return {
      person: {
        name: "jack",
        age: 18,
      },
    };
  },
  methods: {
    add() {
      /*
        vue2 新增属性不是响应式的
          要想新增属性是：this.$set(this.person, 'sex', '男') 添加的属性是响应式的
          删除响应式属性：this.$delete(this.person, 'sex')

        vue3 新增属性是响应式的
          剔除 $set/$delete 两个API
      */
      // 在vue2中，这个属性不会渲染，新添加的属性不是响应式 Object.defineProperty
      // 在vue3中是可以的。Proxy (新增属性也是响应式)
      // vue3中实例对象没有$set\$delete方法
      this.person.sex = "男";
    },
  },
});
</script>

<style scoped></style>
